<template >
<div class="shopping">
    <!--头部-->
    <div class="top">
        <router-link to="/journey" class="iconfont icon-arrowLeft"></router-link>
        <div>我的购票</div>
        <router-link to="" @click.native="message">{{isOn?"管理":"完成"}}</router-link>
    </div>
    <!--数量及地址-->
    <div class="count">
        <div>共{{$store.getters.getNum}}件宝贝</div>
        <!--<div>收货地址：中兴南昌科技园3栋2号办公室</div>-->
    </div>
    <!--购物车主体-->
    <form action="">
    <div v-if="$store.state.list.length" class="content">
        <div v-for="(value,index) in $store.state.list" :key="index" class="cont">
            <div class="nav">
                <div>
                    <span>
                        <input type="checkbox" name="" @click="check(index)" class="Checkbox" v-model="value.stat">
                    </span>
                    <i class="iconfont icon-dianpu"></i>
                    <router-link to="">{{value.view}}<span>&nbsp;&gt;&gt;</span></router-link>
                </div>
                <router-link to="">领券>></router-link>
            </div>
            <div class="cont_top">
                <div><img :src="value.img" alt=""></div>
                <div>
                    <div>{{value.name}}</div>
                    <div>
                        <div>订购日期：</div>
                        <span>{{Date1}}</span>
                    </div>
                    <div>
                        <!--金额-->
                        <span>￥{{value.price}}</span>
                        <div>
                            <!--加减按钮-->
                            <div @click="handleReduce(index)">-</div>
                            <span>{{value.count}}</span>
                            <div @click="handleAdd(index)">+</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div v-else class="empty">
            <img src="img/shopping.png" alt="">
            <router-link to="/journey">马上去逛逛</router-link>
        </div>
        <div class="means">
            <div>
                <!--全选-->
                <span>
                    <input type="checkbox" name="" class="Checkbox" v-model="$store.state.chkAll"  id="checkAll" @click="checkAll()">
                <label for="checkAll"></label>
                </span>
                <span>{{ $store.state.chkAll?"取消全选":"全选"}}</span>
            </div>
            <div v-show="isOn">
                <!--金额-->
                <div>合计:<span>￥{{$store.getters.getCount.total}}</span></div>
                <router-link  @click.native="pay()" to="">结算({{$store.getters.getCount.count}})</router-link>
            </div>
            <div v-show="!isOn">
                <router-link to="" @click.native="handleRemove()">删除</router-link>
            </div>
        </div>
    </form>
    <Footer/>
    <!--遮罩层-->
    <div class="zhe" v-show="$store.state.is_show" @click.stop="zhe()">
                <div class="box" @click.stop="box()">
                    <div>确认将{{$store.getters.Checked.length}}这个宝贝删除？</div>
                    <div>
                        <span @click="think">我再想想</span>
                        <span @click="remove">删除</span>
                </div>
        </div>
    </div>
</div>

</template>
<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
    text-decoration: none;
}

//  遮罩层
.zhe{
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    background-color: rgba(0,0,0,.4);
    display: flex;
    justify-content: center;
    align-items: center;
            >.box{
                width: 60%;
                height: 2.132rem;
                background-color: #fff;
                display: flex;
                flex-flow: column;
                border-radius: 0.267rem;
                >div:nth-child(1){
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #000;
                    font-size: 0.373rem;
                    height: 60%;
                    border-bottom: 0.027rem solid #eee;
                }
                >div:nth-child(2){
                    display: flex;
                    align-items: center;
                    height: 40%;
                    font-size: 0.426rem;
                    >span{
                        width: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        height: 100%;
                    }
                    >span:nth-child(1){
                        color: #aaa;
                        border-right: 1px solid #eee;
                    }
                    >span:nth-child(2){
                        color: red;
                    }
                }
    }
}
.shopping {
    margin: 0.213rem;
    /*顶部*/
    .top {
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 1.466rem;
        >a:nth-child(1){
            font-weight: bold;
            font-size: 0.8rem;
        }
        > div {
            font-size: 0.666rem;
            font-weight: bold;
        }
        > a {
            font-size: 0.48rem;
            color: #000;
        }
    }
    //  数量及地址
    .count {
        height: 0.8rem;
        display: flex;
        width: 90%;
        font-size: 0.426rem;
        color: #666;
        > div:nth-child(1) {
            width: 36%;
            margin-right: 0.267rem;
            text-align: left;
        }
        > div:nth-child(2) {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    //  购物车主体
    .content{
        width: 100%;
        margin: 0 auto 2.799rem;
        min-height: 14.126rem;
        .cont{
            height: 4.264rem;
            display: flex;
            flex-flow: column;
            margin-bottom: 0.267rem;
            background-color: #fff;
            border-radius: 0.267rem;
            border: 0.027rem solid #ccc;
            >.nav{
                display: flex;
                justify-content: space-between;
                font-size: 0.373rem;
                height: 0.933rem;
                align-items: center;
                /*//  多选按钮*/
                span {
                    width: 0.666rem;
                    height: 0.533rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    >input{
                        width: 80%;
                        height: 80%;
                    }
                }
                //  店铺
                >div{
                    font-size: 0.426rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    >i{
                        width: 0.8rem;
                    }
                    >a{
                        color: #000;
                        font-weight: bold;
                        display: flex;
                        >span{
                            color: #aaa;
                        }
                    }
                }
                //  领券
                >a{
                    color: red;
                    margin-right: 0.267rem;
                }
            }
            >.cont_top{
                display: flex;
                height: 3.198rem;
                justify-content: space-evenly;
                >div:nth-child(1){
                    width: 33%;
                    >img{
                        width: 100%;
                        height: 95%;
                        border-radius: 0.267rem;
                    }
                }
                >div:nth-child(2){
                    width: 55%;
                    height: 95%;
                    display: flex;
                    flex-flow: column;
                    justify-content: space-around;
                    >div:nth-child(1){
                        font-size: 0.426rem;
                        font-weight: bold;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 100%;
                        text-align: left;
                    }
                    >div:nth-child(2){
                        font-size: 0.373rem;
                        display: flex;
                        align-items: baseline;
                    }
                    >div:nth-child(3){
                        display: flex;
                        justify-content: space-between;
                        >span{
                            color: red;
                            font-size: 0.533rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-weight: bold;
                        }
                        >div{
                            display: flex;
                            align-items: center;
                            border: 0.027rem solid #ccc;
                            border-radius: 0.16rem;
                            //  加减按钮
                            >div{
                                font-size: 0.533rem;
                                width: 0.8rem;
                                height: 0.8rem;
                                border: none;
                                background-color: #eee;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            }
                            >span{
                                font-size: 0.426rem;
                                margin: 0 0.267rem;
                            }
                        }
                    }
                }
            }
        }
    }
    .means{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        height: 1.333rem;
        bottom: 1.439rem;
        left: 0;
        background-color: #fff;
        //  全选按钮
        >div {
            height: 0.533rem;
            position: relative;
            display: flex;
            align-items: center;
            >span:nth-child(1){
                width: 0.64rem;
                height: 50%;
                margin-left: 0.133rem;
            }
            >span:nth-child(2){
                font-size: 0.426rem;
                font-weight: bold;
            }
            //  金额
            >div{
                font-size: 0.48rem;
                font-weight: bold;
                >span{
                color: red;
            }
            }
            //  结算
            >a{
                padding: 0.16rem 0.267rem;
                border-radius: 0.426rem;
                background-color: red;
                color: #fff;
                margin: 0 0.213rem;
                font-size: 0.426rem;
            }
            }
        >div:nth-child(1){
            min-width: 25%;
        }
        >div:nth-child(2){
            min-width: 22%;
            height: 0.8rem;
            display: flex;
            justify-content: space-evenly;
        }
        .Checkbox {
            position: absolute;
            visibility: hidden;
        }
        .Checkbox+label {
            position:absolute;
            top: 0;
            left: 0.107rem;
            width: 0.533rem;
            height: 0.533rem;
            border: 0.027rem solid #A6A6A6;
            border-radius: 50%;
        }
        .Checkbox:checked+label{
            background-color: #0075FF;
        }
        .Checkbox:checked+label:after {
            content: "";
            position: absolute;
            left: 0.08rem;
            top: 0.053rem;
            width: 0.187rem;
            height: 0.08rem;
            border: 0.08rem solid #fff;
            border-top-color: transparent;
            border-right-color: transparent;
            -webkit-transform: rotate(-60deg);
        }
    }
}
//  购物车为空
    .empty{
        font-size: 0.48rem;
        font-weight: bold;
        height: 9.328rem;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        >img{
            margin-bottom: 0.533rem;
            width: 80%;
        }
        >a{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0.35rem 0.5rem;
            background-color: #42dbb5;
            color: #fff;
            border-radius: 0.8rem;
        }
    }
</style>
<script>
    import Footer from '@/components/footer.vue'
    export default {
        data(){
            return {
                Date1:"",
                //  控制结算删除按钮
                isOn:true,
                list:[],
                count:0,
                tol:0,
            }
        },
        methods:{
            //  减少
          handleReduce(index){
              this.$store.commit('handleReduce',index);
              //  购物车本地存储
              localStorage.setItem('list',JSON.stringify(this.$store.state.list));
          },
            //  增加
            handleAdd(index){
                this.$store.commit('handleAdd',index);
                //  购物车本地存储
                localStorage.setItem('list',JSON.stringify(this.$store.state.list));
            },

            //  结算
            pay(){
                this.$store.commit('Paid');
                //  如果结算成功
                if (this.$store.state.push==true){
                    this.$store.state.push=false;
                    //  购物车本地存储
                    localStorage.setItem('list',JSON.stringify(this.$store.state.list));
                    //  已付款本地存储
                    localStorage.setItem('paid',JSON.stringify(this.$store.state.paid));
                    //  更新已售
                    this.$axios.post('http://118.178.85.166:3000/login',{particulars:JSON.stringify(this.$store.state.particulars),met:5}).then((data)=>{
                        //  全部数据
                        let Data=data.data;
                        if (Data.code==200){

                        }
                    }).catch((err)=>{
                        console.log('这是点击退出登陆按钮中的错误:'+err);
                    });
                    alert('即将跳转结算页面');
                    this.$router.push('/pay');
                }

            },
            //  删除按钮
            handleRemove(){
              //  是否有选中的宝贝
                this.$store.commit('Del')
            },
            //  遮罩层点击旁边撤销
            zhe(){
                this.$store.state.is_show=false
            },
            //  点击遮罩层子元素
            box(){},
            //  我再想想
            think(){
              this.$store.state.is_show=false
            },
             //确认删除
            remove(){
                this.$store.commit('del');
                //  购物车本地存储
                localStorage.setItem('list',JSON.stringify(this.$store.state.list));
            },
            //  单选
            check(index){
                this.$store.commit('checkOne',index)
            },
            //  全选
            checkAll(){
              this.$store.commit('checkedAll');
            },
            //  管理
            message(){
              this.isOn=!this.isOn;
            }
        },
        components: {Footer},
        mounted(){
            this.list=this.$store.state.list;
            var now=new Date();
            this.Date1=now.toLocaleDateString().split('/').join('-');
        },
    }
</script>
